<template>
    <div class="addaddress">
        <div class="head">
            <div class="head_left"><van-icon name="arrow-left" @click="back" /></div>
            <div class="head_mid">
                <div class="head-box">新建地址</div>
            </div>
            <div class="head_right"></div>
        </div>
        <!-- show-set-default -->
        <div class="addressadd">
            <van-address-edit
                :area-list="areaList"
                show-delete
                show-search-result
                :search-result="searchResult"
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave"
                @delete="onDelete"
                @change-detail="onChangeDetail"
            />
        </div>
    </div>
</template>
<script setup>
import { areaList } from "@vant/area-data";
import { ref, onMounted } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { getUserId, addAddress } from "../../request/index";
let router = useRouter();
let userid = ref("");
let back = () => {
    router.go(-1);
};

const searchResult = ref([]);

userid.value = localStorage.getItem("user_id");
if (userid.value == undefined) {
    console.log("登录已过期");
}
// getUserId({ user_nick_name: username }).then((res) => {
//     userid.value = res.data[0].user_id;
// });

const onSave = (AddressEditInfo) => {
    if (userid.value == undefined) {
        console.log("登录已过期");
    } else {
        let address = AddressEditInfo.province + AddressEditInfo.city + AddressEditInfo.county + AddressEditInfo.addressDetail;
        let user_name = AddressEditInfo.name;
        let user_phone = AddressEditInfo.tel;
        let user_address = address;
        addAddress({ user_id: userid.value, user_name, user_phone, user_address }).then((res) => {
            console.log(res);
            if (res.code == 200) {
                alert(res.msg);
                router.go(-1);
            }
        });
    }
};
const onDelete = (AddressEditInfo) => {
    AddressEditInfo.name = "";
    AddressEditInfo.tel = "";
    AddressEditInfo.city = "";
    AddressEditInfo.county = "";
    AddressEditInfo.province = "";
    AddressEditInfo.addressDetail = "";
};

const onChangeDetail = (val) => {
    if (val) {
        // searchResult.value = [
        //     {
        //         name: "黄龙万科中心",
        //         address: "杭州市西湖区",
        //     },
        // ];
        searchResult.value = [];
    } else {
        searchResult.value = [];
    }
};
</script>

<style lang="scss" scoped>
.addaddress {
    .head {
        color: #666666;
        box-shadow: 0 0 5px 1px #e5e5e5;
        height: 3.125rem;
        display: flex;
        .head_left {
            font-size: 1.25rem;
            width: 6.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .head_mid {
            font-size: 1.0625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        .head_right {
            width: 6.25rem;
        }
    }
}
</style>
